{% extends "base.html" %}

{% block title %}提示词列表 - 提示词管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1>
                <i class="bi bi-chat-square-text"></i> 
                提示词列表
                <span class="badge bg-primary">{{ prompts|length }}</span>
            </h1>
            <a href="{{ url_for('add_prompt') }}" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> 新建提示词
            </a>
        </div>
    </div>
</div>

<!-- 搜索过滤器 -->
<div class="search-form">
    <form method="GET" action="{{ url_for('prompts') }}">
        <div class="row">
            <div class="col-md-4 mb-3">
                <label class="form-label">搜索关键词</label>
                <input type="text" class="form-control" name="query" value="{{ current_query }}" placeholder="搜索标题、内容或标签...">
            </div>
            <div class="col-md-3 mb-3">
                <label class="form-label">分类</label>
                <select class="form-select" name="category">
                    <option value="">所有分类</option>
                    {% for category in categories %}
                        <option value="{{ category.id }}" {% if current_category == category.id %}selected{% endif %}>
                            {{ category.name }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-3 mb-3">
                <label class="form-label">标签</label>
                <input type="text" class="form-control" name="tags" value="{{ current_tags }}" placeholder="标签1,标签2...">
            </div>
            <div class="col-md-2 mb-3">
                <label class="form-label">状态过滤</label>
                <div class="mb-2">
                    <label class="toggle-switch">
                        <input type="checkbox" name="enabled_only" value="true" {% if enabled_only %}checked{% endif %}>
                        <span class="toggle-slider"></span>
                    </label>
                    <small class="ms-2">只显示启用</small>
                </div>
                <div>
                    <label class="toggle-switch">
                        <input type="checkbox" name="disabled_only" value="true" {% if disabled_only %}checked{% endif %}>
                        <span class="toggle-slider"></span>
                    </label>
                    <small class="ms-2">只显示禁用</small>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <button type="submit" class="btn btn-primary me-2">
                    <i class="bi bi-search"></i> 搜索
                </button>
                <a href="{{ url_for('prompts') }}" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-clockwise"></i> 重置
                </a>
            </div>
        </div>
    </form>
</div>

<!-- 提示词列表 -->
{% if prompts %}
    <div class="row">
        {% for prompt in prompts %}
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card prompt-card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h6 class="card-title mb-0 d-flex align-items-center">
                            <label class="toggle-switch me-2">
                                <input type="checkbox" {% if prompt.enabled %}checked{% endif %} onchange="togglePrompt('{{ prompt.id }}')">
                                <span class="toggle-slider"></span>
                            </label>
                            {{ prompt.title }}
                        </h6>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                <i class="bi bi-three-dots"></i>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="{{ url_for('use_prompt', prompt_id=prompt.id) }}"><i class="bi bi-play"></i> 使用</a></li>
                                <li><a class="dropdown-item" href="{{ url_for('edit_prompt', prompt_id=prompt.id) }}"><i class="bi bi-pencil"></i> 编辑</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li>
                                    <a class="dropdown-item" href="{{ url_for('export_single_prompt', prompt_id=prompt.id) }}" download>
                                        <i class="bi bi-download"></i> 导出
                                    </a>
                                </li>
                                <li>
                                    <form method="POST" action="{{ url_for('delete_prompt', prompt_id=prompt.id) }}" style="display: inline;" onsubmit="return confirm('确认删除此提示词？')">
                                        <button type="submit" class="dropdown-item text-danger">
                                            <i class="bi bi-trash"></i> 删除
                                        </button>
                                    </form>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- 分类信息 -->
                        {% set category = categories | selectattr('id', 'equalto', prompt.category_id) | first %}
                        {% if category %}
                            <div class="mb-2">
                                <span class="badge bg-light text-dark">
                                    {% if category.color %}
                                        <span class="category-color" style="background-color: {{ category.color }}"></span>
                                    {% endif %}
                                    {{ category.name }}
                                </span>
                            </div>
                        {% endif %}
                        
                        <!-- 内容预览 -->
                        <div class="prompt-content mb-3">
                            <p class="card-text">{{ prompt.content }}</p>
                        </div>
                        
                        <!-- 变量显示 -->
                        {% if prompt.variables %}
                            <div class="mb-2">
                                <small class="text-muted">变量:</small><br>
                                {% for variable in prompt.variables %}
                                    <span class="variable me-1">{{ variable }}</span>
                                {% endfor %}
                            </div>
                        {% endif %}
                        
                        <!-- 标签 -->
                        {% if prompt.tags %}
                            <div class="mb-2">
                                {% for tag in prompt.tags %}
                                    <span class="badge bg-secondary tag me-1">{{ tag }}</span>
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>
                    <div class="card-footer">
                        <div class="d-flex justify-content-between">
                            <small class="text-muted">ID: {{ prompt.id[:8] }}...</small>
                            <div>
                                <a href="{{ url_for('use_prompt', prompt_id=prompt.id) }}" class="btn btn-sm btn-primary">
                                    <i class="bi bi-play"></i> 使用
                                </a>
                                <a href="{{ url_for('edit_prompt', prompt_id=prompt.id) }}" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-pencil"></i> 编辑
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% else %}
    <div class="text-center py-5">
        <i class="bi bi-inbox display-1 text-muted"></i>
        <h3 class="text-muted mt-3">暂无提示词</h3>
        <p class="text-muted">开始创建您的第一个提示词吧！</p>
        <a href="{{ url_for('add_prompt') }}" class="btn btn-primary">
            <i class="bi bi-plus-circle"></i> 新建提示词
        </a>
    </div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
// 切换提示词启用状态
function togglePrompt(promptId) {
    fetch('/prompts/' + promptId + '/toggle', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('操作失败，请重试');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('操作失败，请重试');
    });
}

// 状态过滤开关互斥逻辑和自动提交
document.addEventListener('DOMContentLoaded', function() {
    const enabledOnlySwitch = document.querySelector('input[name="enabled_only"]');
    const disabledOnlySwitch = document.querySelector('input[name="disabled_only"]');
    const searchForm = document.querySelector('form[action*="prompts"]');
    
    if (enabledOnlySwitch && disabledOnlySwitch && searchForm) {
        enabledOnlySwitch.addEventListener('change', function() {
            if (this.checked) {
                disabledOnlySwitch.checked = false;
            }
            // 自动提交表单
            searchForm.submit();
        });
        
        disabledOnlySwitch.addEventListener('change', function() {
            if (this.checked) {
                enabledOnlySwitch.checked = false;
            }
            // 自动提交表单
            searchForm.submit();
        });
    }
    
    // 展开/收起内容
    const contentElements = document.querySelectorAll('.prompt-content');
    contentElements.forEach(function(element) {
        const paragraph = element.querySelector('p');
        if (paragraph && paragraph.scrollHeight > element.clientHeight) {
            const expandBtn = document.createElement('button');
            expandBtn.className = 'btn btn-sm btn-link p-0';
            expandBtn.innerHTML = '<i class="bi bi-chevron-down"></i> 展开';
            expandBtn.onclick = function() {
                if (element.classList.contains('expanded')) {
                    element.classList.remove('expanded');
                    expandBtn.innerHTML = '<i class="bi bi-chevron-down"></i> 展开';
                } else {
                    element.classList.add('expanded');
                    expandBtn.innerHTML = '<i class="bi bi-chevron-up"></i> 收起';
                }
            };
            element.appendChild(expandBtn);
        }
    });
});
</script>
{% endblock %}